<template>
  <div id='sys_sensitive'>
    <el-form :inline="true" size="medium">
      <el-form-item>
        <el-input v-model="params.sensitiveStr" placeholder="请输入敏感词" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">添加敏感词</el-button>
      </el-form-item>
      <el-form-item>
          当详细地址带有敏感词时，将不能下单成功
      </el-form-item>
    </el-form>

    <el-table :data="list" v-loading="loading" stripe>
      <el-table-column label="id" prop="id" align="center"></el-table-column>
      <el-table-column label="敏感词" prop="sensitive_str" align="center"></el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="setData(scope.row)">修改</el-button>
          <el-button type="text" style="color: red;" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="page"
      background
      @size-change="handleSizeChange"
      @current-change="getList"
      :current-page.sync="params.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      title="添加敏感词"
      :visible.sync="dialogVisible"
      width="400px"
      center
      :close-on-click-modal="false"
    >
      <el-form :model="formData" ref="formData" label-width="80px">
        <el-form-item label="敏感词">
          <el-input v-model="formData.sensitiveStr" placeholder="请输入敏感词"></el-input>
        </el-form-item>
      </el-form>
      <div class="align-center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSensitive">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="修改敏感词"
      :visible.sync="updatedialogVisible"
      width="400px"
      center
      :close-on-click-modal="false"
    >
      <el-form :model="formData" ref="formData" label-width="80px">
        <el-form-item label="敏感词">
          <el-input v-model="formData.sensitiveStr2" placeholder="请输入敏感词"></el-input>
        </el-form-item>
      </el-form>
      <div class="align-center">
        <el-button @click="updatedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSensitive">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        isCount: true,
        sensitiveStr: ""
      },
      list: [],
      total: 0,
      loading: false,
      selectData: [],
      dialogVisible: false,
      updatedialogVisible: false,
      formData: {
        id: "",
        sensitiveStr: "",
        sensitiveStr2: ""
      }
    };
  },
  watch: {},
  create() {},
  mounted() {
    this.getList();
  },

  methods: {
    add() {
      this.clearFormData();
      this.dialogVisible = true;
    },
    timeChange(val) {
      if (val) {
        this.params.startTime = this.$common.getDate(val[0]);
        this.params.endTime = this.$common.getDate(val[1]);
      } else {
        this.params.startTime = "";
        this.params.endTime = "";
      }
      this.search();
    },
    setData(data) {
      for (var key in data) {
        this.formData[key] = data[key];
      }
      this.formData.id = data.id;
      this.formData.sensitiveStr2 = data.sensitive_str;

      this.updatedialogVisible = true;
    },
    handleSizeChange(value) {
      this.params.pageSize = value;
      this.search();
    },
    search() {
      this.params.pageNo = 1;
      this.params.isCount = true;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$request.post({
        url: "/ReportApi/admin/sensitivelist",
        params: this.params,
        success: result => {
          this.list = result[0];
          if (this.params.isCount) {
            this.params.isCount = false;
            this.total = result[1];
          }
        },
        finally: () => {
          this.loading = false;
        }
      });
    },
    addSensitive() {
      this.loading = true;
      if (!this.formData) {
        this.$message.error("请输入要设置的敏感词");
        return;
      }
      this.$request.post({
        url: "/ReportApi/admin/addSensitive",
        params: this.formData,
        success: result => {
          this.$message.success("添加成功");
          this.getList();
        },
        error: result => {
          // this.$message.error(result);
          this.getList();
        },
        finally: () => {
          this.loading = false;
          this.dialogVisible = false;
          this.clearFormData();
        }
      });
    },
    updateSensitive() {
      this.loading = true;
      this.$request.post({
        url: "/ReportApi/admin/updateSensitive",
        params: this.formData,
        success: result => {
          this.$message.success("修改成功");
          this.getList();
        },
        error: result => {
          // this.$message.error(result);
          this.getList();
        },
        finally: () => {
          this.loading = false;
          this.updatedialogVisible = false;
          this.clearFormData();
        }
      });
    },
    clearFormData() {
      this.formData.id = "";
      this.formData.sensitiveStr = "";
      this.formData.sensitiveStr2 = "";
    },
    del(id) {
      this.$confirm("确认删除?", "提示").then(() => {
        this.loading = true;
        this.$request.post({
          url: "/ReportApi/admin/Sensitivedel",
          params: {
            id: id
          },
          success: result => {
            this.$message.success("删除成功");
            this.getList();
          },
          error: result => {
            // this.$message.error(result);
            this.getList();
          },
          finally: () => {
            this.loading = false;
          }
        });
      });
    }
  }
};
</script>
   
<style>
</style>
   
<style lang="scss" scoped>
.page {
  text-align: right;
  margin-top: 20px;
}
</style>